html,
body {
  padding: 0;
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
    Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
}

a {
  color: inherit;
  text-decoration: none;
}

* {
  box-sizing: border-box;
}

// 通常の背景色
$color-white: #ffffff;
// ヘッダーの背景色や黒字用のテキスト色
$color-white2: #f6f8fa;
// ボーダー色
$color-gray: #d0d7de;
// 弱いテキスト色
$color-gray2: #57606a;
// ヘッダー背景や白地用のテキスト色
$color-primary: #24292f;
// リンク色
$color-blue: #0969da;
// タグの背景色
$color-blue2: #ddf4ff;
// プライマリボタン色
$color-green: #2da44e;
// 緑ボタンのボーダーとして使う色
// $color-btn-primary-border: rgba(27, 31, 36, 0.15);
// 白地用のエラー色
$color-red: #cf222e;
// 黒地用のエラー色
$color-red2: #f85149;

$primary: $color-primary;
$secondary: $color-white2;
$info: $color-green;
$link-color: $color-blue;
$navbar-dark-color:                 rgba($color-white2, .55) !default;
$navbar-dark-hover-color:           rgba($color-white2, .75) !default;
$navbar-dark-active-color:          $color-white2 !default;
$navbar-dark-disabled-color:        rgba($color-white2, .25) !default;
$navbar-dark-toggler-icon-bg:       url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><path stroke='#{$navbar-dark-color}' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>") !default;
$navbar-dark-toggler-border-color:  rgba($color-white2, .1) !default;

$input-focus-box-shadow: none;
$btn-focus-box-shadow: none;
$btn-active-box-shadow: none;
$btn-focus-width: 0;
$btn-close-focus-shadow: none;
$form-check-input-focus-box-shadow: none;

$font-size-base: 0.875rem;

$spacer: 1rem;
$spacers: (
  0: 0,
  0px: 0,
  2px: $spacer * .125,
  4px: $spacer * .25,
  6px: $spacer * .375,
  8px: $spacer * .5,
  12px: $spacer * .75,
  16px: $spacer,
  20px: $spacer * 1.25,
  24px: $spacer * 1.5,
  32px: $spacer * 2,
  48px: $spacer * 3,
  64px: $spacer * 4,
);

@import 'bootstrap/scss/bootstrap';

// TypeScript 上で使いたい変数は CSS Variables に入れておく
:root {
  --wb-breakpoint-xs: #{map-get($grid-breakpoints, "xs")};
  --wb-breakpoint-sm: #{map-get($grid-breakpoints, "sm")};
  --wb-breakpoint-md: #{map-get($grid-breakpoints, "md")};
  --wb-breakpoint-lg: #{map-get($grid-breakpoints, "lg")};
  --wb-breakpoint-xl: #{map-get($grid-breakpoints, "xl")};
  --wb-breakpoint-xxl: #{map-get($grid-breakpoints, "xxl")};
}

#wb-main {
  .btn-info {
    color: $color-white;
    font-weight: bold;
    border-color: rgba(27, 31, 36, 0.15);
  }
}

p, h1, h2, h3, h4, h5, h6 {
  padding: 0;
  margin: 0;
}
.modal {
  .btn {
    min-width: 72px;
  }
}

.wb-line-horizontal {
  border-bottom: $color-gray solid 1px;
}

#wb-main {
  .cm-editor {
    min-height: 300px;
    height: 100%;
  }
  .cm-scroller {
    overflow: auto;
  }

  .wb-editor-fixedheight {
    .cm-editor {
      height: 300px;
    }
  }
}

#wb-main {
  .cm-focused {
    outline: none;
  }
}

#wb-main {
  .wb-loadtemplate {
    .dropdown-toggle {
      padding: 0px 10px;
      color: $color-gray2;

      display: flex;
      align-content: center;
      justify-content: center;
    }
    .dropdown-toggle::after {
      display: none;
    }
  }
}

#wb-main {
  .wb-nav-icondropdown > a.nav-link {
    padding-top: 4px;
    padding-bottom: 4px;
  }
}

.wb-disabled {
  color: $gray-600;
}

.wb-editortabs {
  border: none;
  .nav-link {
    isolation: isolate;
  }
}

.wb-stdinbutton {
  text-decoration: none;
  background-color: $color-white2;
  border: $color-gray solid 1px;
  border-radius: 4px 4px 4px 4px;
  margin-bottom: -1px;
  height: 40px;
}
@include media-breakpoint-up(md) {
  .wb-stdinbutton {
    border-bottom: $color-white2 solid 1px;
    border-radius: 4px 4px 0px 0px;
  }
}
.wb-stdinbutton.wb-stdinactive {
  isolation: isolate;
  border-bottom: $color-white2 solid 1px;
  border-radius: 4px 4px 0px 0px;
}

.wb-stdin {
  border: $color-gray solid 1px;
  border-radius: 8px 0px 8px 8px;
}
@include media-breakpoint-up(md) {
  .wb-stdin {
    width: 244px;
  }
}

.wb-editor {
  border: $color-gray solid 1px;
  border-radius: 0px 8px 8px 8px;
}

@include media-breakpoint-up(md) {
  .wb-editor {
    border-radius: 0px 0px 8px 8px;
    min-width: 244px;
    width: calc(100vw
      /* 画面左右のパディング */ - 64px
      /* 言語選択の幅 */ - 244px
      /* 言語選択とエディタのマージン */ - 16px
      );
  }
  .wb-editor.wb-stdinactive {
    border-radius: 0px 8px 8px 8px;
    width: calc(100vw
      /* 画面左右のパディング */ - 64px
      /* 言語選択の幅 */ - 244px
      /* 言語選択とエディタのマージン */ - 16px
      /* 標準入力エディタの幅 */ - 244px
      /* 通常エディタと標準入力エディタのマージン */ - 8px
      );
  
  }
  .wb-sidebar-locked {
    .wb-editor {
      width: calc(100vw
        /* 画面左右のパディング */ - 64px
        /* 言語選択の幅 */ - 244px
        /* 言語選択とエディタのマージン */ - 16px
        /* サイドバーの幅 */ - 320px
        );
    }
    .wb-editor.wb-stdinactive {
      width: calc(100vw
        /* 画面左右のパディング */ - 64px
        /* 言語選択の幅 */ - 244px
        /* 言語選択とエディタのマージン */ - 16px
        /* 標準入力エディタの幅 */ - 244px
        /* 通常エディタと標準入力エディタのマージン */ - 8px
        /* サイドバーの幅 */ - 320px
        );
    }
  }
}

.wb-languagelist {
  > div:first-child {
    background-color: $color-white2;
    font-weight: bold;
    padding: 8px 8px;
  }
  .list-group-item {
    padding: 4px 16px;
  }
}
.wb-languagelist-selected {
  > div > p {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow-x: hidden;
  }
}

@include media-breakpoint-up(md) {
  .wb-compiler {
    width: 244px;
    min-width: 244px;
  }
}

.wb-compilerlist {
  > div:first-child {
    background-color: $color-white2;
    font-weight: bold;
    padding: 8px 8px;
  }

  .list-group-item {
    padding: 4px 16px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow-x: hidden;
  }
}
.wb-compilerlist-selected {
  > div > p {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow-x: hidden;
    flex-basis: calc(100% - 28px);
  }
}

.wb-command {
  border: $color-gray solid 1px;
  color: $color-primary;
}

.wb-result {
  border-radius: 8px;
  //width: calc(100vw - 346px);

  .wb-console {
    background-color: $color-primary;
    //overflow-x: scroll;
    border-radius: 8px 8px 0px 0px;
    > pre {
      font-size: 14px;
      white-space: pre-wrap;
      line-height: 1.2;
      margin: 0;
      padding: 0;
    }
    .wb-result-compilermessages {
      color: $color-white2;
    }
    .wb-result-compilermessagee {
      color: $color-red2;
    }
    .wb-result-stdout {
      color: $color-white2;
    }
    .wb-result-stderr {
      color: $color-red2;
    }
  }

  .wb-console.wb-result-fixedheight {
    height: 300px;
    max-height: 300px;
    overflow-y: auto;
  }

  .wb-info {
    padding: 4px 16px;
    border: $color-primary solid 1px;
    background-color: $color-white2;
    border-radius: 0px 0px 8px 8px;
    .wb-name {
      border-radius: 2px;
      background-color: $color-white;
      color: $color-gray2;
      font-size: 14px;
    }
    //.wb-value {
    //  color: $color-white2;
    //}
  }
}

.wb-author {
  min-width: 144px;
  border: $color-primary solid 1px;
  border-radius: 4px;
  .wb-label {
    background-color: $color-primary;
    color: $color-white2;
  }
  .wb-time {
    font-size: 12px;
    color: $color-gray2;
    white-space: nowrap;
  }
}

.wb-weak-text {
  font-size: 12px;
  color: $color-gray2;
}

.wb-sidebar-root {
  margin-top: 48px;
  overflow-x: hidden;
  overflow-y: auto;
}

.wb-sidebar {
  overflow-x: hidden;
  width: 320px;
  box-shadow: -3px 2px 4px rgba(36, 41, 47, 0.15);

  > div {
    min-height: 100%;
    background-color: $color-white;

    .wb-nav {
      border-bottom: $color-gray solid 1px;
    }

    .wb-history {
      .wb-history-data {
        border-radius: 4px;
        box-shadow: 0px 0px 4px rgba(27, 31, 36, 0.5);
        > :nth-child(3) {
          border-top: $color-gray solid 1px;

          // 言語とコンパイラのバージョン
          > :nth-child(1) {
            > :nth-child(1) {
              text-overflow: ellipsis;
              width: 160px;
              white-space: nowrap;
              overflow-x: hidden;
            }
          }
        }

        .wb-title {
          font-size: 16px;
          font-weight: bold;
          word-break: break-word;
          &.wb-permlink {
            color: $color-green;
          }
        }

        .wb-buttons {
          flex-basis: 48px;
          > button {
            white-space: nowrap;
          }
        }
      }
    }
  }

}

.wb-control-error {
  font-size: 12px;
  color: $color-red;
}

.wb-sponsors {
  > div {
    background-color: $color-white2;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    gap: 0px;
    padding: 8px;

    > label {
      font-weight: bold;
    }

    > div {
      padding: 8px 8px 0px 8px;
      display: flex;
      flex-flow: wrap;
      justify-content: space-around;
      > p,a {
        white-space: nowrap;
        text-decoration: none;
      }
    }
  }
}